<template>
  <div class="picSetting">
    <!-- 添加图片模态框 -->
    <addPic @add="handleAdd"/>

    <el-table
      style="width: 100%,height: 100%" :data="pic" border>
      <el-table-column
        prop="title"
        label="背景图描述"
        width="220"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="mageUrl"
        label="背景图图片"
        width="220">
        <template slot-scope="scope">
          <el-image :src="scope.row.mageUrl" :preview-src-list="bigUrl"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="mageUrl"
        label="背景图外链地址"
        width="220"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        label="操作"
        width="220">
        <template slot-scope="scope">
          <!-- 查看详情 -->
          <viewDetail :detail="scope.row"/>
          <!-- 编辑 -->
          <addPic :edit="scope.row"/>
          <el-button type="button" size="small" @click="handleRemove(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import addPic from './components/addPic.vue'
import viewDetail from './components/viewDetail.vue'
import { picSetting, removePic } from '@/api/setting/picSetting'
import { MessageBox } from 'element-ui'
export default {
  name: 'addpictrue',
  components: {
    addPic,
    viewDetail,
  },
  data() {
    return {
      pic: [],
      bigUrl: [],
      // 显示某条数据的对象
      picDetail: {},
      // 编辑数据的对象
      editData: {},
    }
  },
  created() {
    // 组件初始渲染时发送网络请求
    const request = async() => {
      try {
        const res = await picSetting()
        this.pic = res.data.data.imgList
        res.data.data.imgList.forEach(item => {
          this.bigUrl.push(item.mageUrl)
        })
        // console.log(this.bigUrl)
      } catch (error) {
        console.log(error)
      }
    }
    request()
  },
  methods: {
    // 点击查看按钮展示图片
    handleViewDetail(row) {
      // console.log(row)
      this.picDetail = row
      // console.log(this.picDetail)
    },

    // 添加图片
    handleAdd(form) {
      console.log(form)
      this.pic.title = form.title
      this.pic.mageUrl = form.mageUrl
      this.pic.unshift(form)
      this.bigUrl.unshift(form.mageUrl)
      // console.log(this.pic)
      // const res = sessionStorage.getItem('addpic')
      // console.log(res)
    },

    // 编辑
    handleModifyClick() {

    },

    // 删除
    async handleRemove(id) {
      try {
      // 删除提示
        let result = await MessageBox.confirm(
          '是否确认删除?',
          '删除提示',
          {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
          },
        )
        console.log('result', result)
        // 执行删除逻辑
        result = await removePic(id)
        console.log('删除结果:', result)
        // 将表格数据源中当前删除项从数组中移除
        this.pic = this.pic.filter(pic => pic.id !== id)
      } catch (error) {
        console.log('error:', error)
      }
    },
  },

}
</script>
